<div class="page-title">
  <h4>概览</h4>
</div>

<div class=" overview-bar">
  <!-- 左侧 -->
  <div class=" overview-layout-left">
    <!-- 概览 -->
    <div class="overview-guide" style="overflow: hidden;">
      <div class="overview-guide-img" style="height: 121px;float: left;">
        <img src="assets/images/fcsoverview.svg" alt="">
      </div>
      <div class="overview-guide-content" style="float: left;position: unset;padding: 0 0 0 0.16rem;">
        <h4>欢迎使用函数计算服务</h4>
        <span>
          函数计算提供基于事件机制，弹性、高可用、扩展性好、极速响应的云端无服务器计算能力。您可以仅关注业务逻辑的代码部分，无需关注和配置服务器资源，支持多种函数触发器，满足多样化的事件触发场景。
        </span>
        <div class="guide-footer">
          <in-acl-source [inGroup]="'headerAction1'" [inService]="'fcs'" [inResourceType]="'fcs-function'"
          [inActions]="['CreateFunction']" [inIsLast]="true" #headerAction1>
            <in-acl-btn [inActions]="headerAction1.resActions" inAction="CreateFunction" inLabel="创建函数"> 
          <button nz-button nzType="primary" table-top-opt (click)="createFunction()">创建函数</button>
            </in-acl-btn>
         
          <button nz-button table-top-opt (click)="introduction()">产品介绍</button>
        </in-acl-source>
        </div>
      </div>
    </div>
    <!-- 资源总览 -->
    <div class="resources-overview" style="overflow: hidden;">
      <h5>资源总览</h5>
      <div class="overview-bar-content">
        <div class="pull-left info-bar-4 overview-bar-content-line">
          <h6>应用数量<i class="anticon anticon-info-circle" style="margin-left: 0.04rem;cursor: pointer;" nz-popover
              nzContent="当前应用总量"></i></h6>
          <h2>{{ overviewData ? (overviewData?.groupCount || "0") : "--" }} <span class="info-name">个</span></h2>
          <div class="bar-content-line" style="height: 70px;"></div>
        </div>
        <div class="pull-left pl12 info-bar-4 overview-bar-content-line">
          <h6>函数数量<i class="anticon anticon-info-circle" style="margin-left: 0.04rem;cursor: pointer;" nz-popover
              nzContent="当前函数总量"></i></h6>
          <h2>{{ functionNum ? (functionNum?.functionCount || "0") : "--" }} <span class="info-name">个</span></h2>
          <div class="bar-content-line" style="height: 70px;" *ngIf="isAdmin"></div>
        </div>
        <div class="pull-left pl12 info-bar-4 overview-bar-content-line" *ngIf="isAdmin">
          <h6>本月调用次数<i class="anticon anticon-info-circle" style="margin-left: 0.04rem;cursor: pointer;" nz-popover
              nzContent="本月所有函数的调用总次数"></i></h6>
          <h2>{{ overviewData ? (overviewData?.formatInvokeCount || "0") : "--" }} <span class="info-name">次</span></h2>
          <div><span class="text-underline" nz-popover nzPlacement="bottomLeft"
              [nzContent]="freeQuotaTemplate">查看免费额度使用量</span></div>
          <div class="bar-content-line" style="height: 70px;"></div>
        </div>
        <div class="pull-left pl12 info-bar-4 overview-bar-content-line" *ngIf="isAdmin">
          <h6>本月资源使用量<i class="anticon anticon-info-circle" style="margin-left: 0.04rem;cursor: pointer;" nz-popover
              nzContent="本月所有函数的资源使用量，资源使用量=函数配置内存×执行时间"></i></h6>
          <h2>{{ overviewData ? (overviewData?.formatComputePowert || "0") : "--" }} <span class="info-name">GB*s</span>
          </h2>
          <div><span class="text-underline" nz-popover nzPlacement="bottomLeft"
              [nzContent]="freeQuotaTemplate">查看免费额度使用量</span></div>
        </div>
      </div>
    </div>
  </div>
  <!-- 右侧 -->
  <div class="overview-layout-right">

    <div class=" helpEntrance-container">
      <div class="help-bar-title">快速入口</div>
      <div class="help-bar-content help-bar-content-abox">
        <in-acl-source [inGroup]="'headerAction1'" [inService]="'fcs'" [inResourceType]="'fcs-function'"
          [inActions]="['CreateFunction']" [inIsLast]="true" #headerAction1>
        <in-acl-source [inGroup]="'headerAction2'" [inService]="'fcs'" [inResourceType]="'fcs-group'"
        [inActions]="['CreateGroup']" [inIsLast]="true" #headerAction2>
        <in-acl-source [inGroup]="'headerAction3'" [inService]="'fcs'" [inResourceType]="'fcs-trigger'"
          [inActions]="['CreateTrigger']" [inIsLast]="true" #headerAction3>
          
            <in-acl-btn [inActions]="headerAction1.resActions" inAction="CreateFunction" inLabel="创建函数"> 
              <a (click)="createFunction()">创建函数</a>
            </in-acl-btn>
            <in-acl-btn [inActions]="headerAction2.resActions" inAction="CreateGroup" inLabel="创建应用" > 
              <a (click)="createApp()">创建应用</a>
            </in-acl-btn>
            <in-acl-btn [inActions]="headerAction3.resActions" inAction="CreateTrigger" inLabel="创建触发器" > 
              <a (click)="createTrriger()">创建触发器</a>
            </in-acl-btn>
        <a (click)="createSelfweb()">创建自定义域名</a>
        </in-acl-source>
        </in-acl-source>
        </in-acl-source>
      </div>
    </div>

  <div class="helpEntrance-container">
    <!-- <div class="help-container"> -->
      <div class="help-bar-title">快捷链接</div>
      <div class="help-bar-content">
        <p class="code-02">新手入门</p>
        <p><a class="link" nzi-document-center [docTitle]="'新手入门'">使用流程</a></p>
        <p><a class="link" nzi-document-center target="_blank" href="/document/fcs/3-quickstart.html#使用控制台创建函数" [docTitle]="'使用控制台创建函数'">使用控制台创建函数</a></p>
        <!-- <p><a nzi-document-center [docTitle]="'开发指南'">开发指南</a></p>
        <p><a nzi-document-center [docTitle]="'常见问题'">常见问题</a></p> -->

        <p class="code-02">产品介绍</p>
        <p><a class="link" nzi-document-center target="_blank" href="/document/fcs/1-service-introduction.html#产品简介">产品简介</a></p>
        <p><a class="link" nzi-document-center target="_blank" href="/document/fcs/1-service-introduction.html#产品功能">产品功能</a></p>
        <p><a class="link" nzi-document-center target="_blank" href="/document/fcs/1-service-introduction.html#产品优势">产品优势</a></p>

        <p class="code-02"><a class="link" nzi-document-center [docTitle]="'开发指南'">开发指南</a></p>
      </div>
    <!-- </div> -->
  </div>

    


  </div>
</div>

<ng-template #freeQuotaTemplate>
  <div style="width: 500px;">
    <h5 style="margin-bottom: 20px;">本月免费额度使用量<i class="anticon anticon-info-circle"
        style="margin-left: 0.04rem;cursor: pointer;" nz-popover [nzOverlayStyle]="{'max-width': '7rem'}"
        nzContent="每个账号每月可以免费执行 100 万次函数调用，免费使用 40 万 GB*S 的资源，超出免费额度的调用次数和资源使用量会收取费用。每个自然月最后一天 23:59:59 后，已用计数会自动清零，并重新统计账号内免费额度的使用情况。上个自然月未使用完的免费额度，不能累计到当前自然月。"></i>
    </h5>
    <div style="margin: 10px 0;">
      <div>
        <span>调用次数（{{ overviewData ? (overviewData?.invokeCount || "0") : "--" }}/100万 次）</span>
      </div>
      <nz-progress [nzPercent]="invokePercent" nzSize="small" [nzFormat]="percentFormat" nzStatus="normal"
        [nzStrokeColor]="invokePercent >= 100 ? '#cc3a21' : invokePercent >= 80 ? '#fdb81e' : '#2186FB'">
      </nz-progress>
    </div>
    <div style="margin: 10px 0;">
      <div>
        <span>资源使用量（{{ overviewData ? (overviewData?.computePower).toFixed(2) : "--" }}/40万 GB*s）</span>
      </div>
      <nz-progress [nzPercent]="computerPercent" nzSize="small" [nzFormat]="percentFormat" nzStatus="normal"
        [nzStrokeColor]="computerPercent >= 100 ? '#cc3a21' : computerPercent >= 80 ? '#fdb81e' : '#2186FB'">
      </nz-progress>
    </div>
    <div style="text-align: right;margin: 20px 0 8px;"><span>到期时间：{{lastDate}}</span></div>
  </div>
</ng-template>